<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VCascader v-model="form.department_name" placeholder="部门" type="department" multiple collapse-tags filterable clearable checkStrictly style="min-width: 160px" />
        <el-date-picker v-model="form.month" type="month" value-format="YYYY-MM" placeholder="月份" class="w-36" />
        <VCascader v-model="form.update_user_id" placeholder="更新人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">更新时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/demand/basic/config/add" type="primary" @click="create(tableRef)"><i class="dk-iconfont icon-Plus" />添加</VButton>
        <VExport auth="/purchase/demand/basic/config/derive" mainKey="dac_id" name="department_amount" :tableRef="tableRef" task class="ml-auto" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add.vue'


import { getOptionPms } from '@/api/public'

const baseName = 'department_stock'
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 获取options
const options = ref({})
getOptionPms({ type: baseName }).then(res => {
  options.value = res.data
})

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 50 },
  formConfig: {
    data: {
      dateRange: { type: 'update_time', value: [], range: true },
    }
  },
  columns: [
    { field: 'department_name', title: '部门', minWidth: 300, slots: {
      default: ({row}) => <VText value={row.department_name} line={2} />
    } },
    { field: 'month', title: '月份', minWidth: 80, slots: {
      default: ({row}) => <VText value={row.month}></VText>
    } },
    { field: 'amount', title: '备货金额', minWidth: 80, slots: {
      default: ({row}) => <VText value={row.amount}></VText>
    } },
    { field: 'update_user', title: '更新人', minWidth: 100, slots: {
      default: ({row}) => <VText value={row.update_user}></VText>
    } },
    { field: 'update_time', title: '更新时间',minWidth: 120, slots: {
      default: ({row}) => <VText value={row.update_time}></VText>
    } },
    {
      title: '操作', width: 120, fixed: 'right', slots: {
        default: ({ row }) => {
          const { dac_id } = row
          return [<div>
            <VButton auth="/purchase/demand/basic/config/edit" link type="primary" onClick={() => addRef?.value.open(dac_id)}>编辑</VButton>
            <VButton auth="/purchase/demand/basic/config/logs" link type="primary" onClick={() => logRef?.value.open({ log_type: baseName, dac_id })}>日志</VButton>
          </div>]
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  